<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="lcDeploymentHisTableBody">
            <div class="card-header">
                <div class="card-title">
                    <!-- <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span> -->
                    <h3 class="card-label"> 操作区域 </h3>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">状态:</label>
                            <div class="col-lg-2">
                                <el-select maxlength="20" v-model="searchForm.status" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                        v-for="item in [{value:0,label:'发布中'},{value:1,label:'暂停'}]"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <label class="col-form-label">部署编号:</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" v-model="searchForm.deploymentId" placeholder="请输入">
                            </div>
                            <label class="col-form-label">标识:</label>
                            <div class="col-lg-2">
                                <el-select maxlength="20" v-model="searchForm.flag" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                        v-for="item in [{value:'0',label:'通过平台设计器设计'},{value:'1',label:'通过上传部署'}]"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <label class="col-form-label">租户：</label>
                            <div class="col-md-2">
                                <input type="text" class="form-control" v-model="searchForm.tenantId" placeholder="请输入">
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">产品:</label>
                            <div class="col-lg-2">
                                <el-select maxlength="20" v-model="searchForm.lcProductId" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                    v-for="item in productList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <label class="col-form-label">产品组:</label>
                            <div class="col-lg-2">
                                <el-select maxlength="20" v-model="searchForm.lcGroupId" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                    v-for="item in groupList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <label class="col-form-label">模块Key:</label>
                            <div class="col-lg-2">
                                <input type="text" class="form-control"  v-model="searchForm.moduleKey" placeholder="请输入">
                            </div>
                            
                            <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2"
                            @click="search()"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                            <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2" @click="resetAll()">
                            <span><span>清空条件</span></span></b-button>
                            <button class="btn btn-light-primary font-weight-bold mr-2" @click="delXtLcDeploymentHis(0)"
                                :disabled="this.sels.length != 1">
                                <span><i class="la la-pen-alt"></i><span>发 布</span></span>
                            </button>
                            <!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
                            <button class="btn btn-light-danger font-weight-bold mr-2" @click="delXtLcDeploymentHis(1)"
                                :disabled="this.sels.length === 0">
                                <span><i class="far fa-trash-alt"></i><span>暂 停</span></span>
                            </button>
                            <!-- <b-button variant="success"  @click="resetAll()">
                                <b-spinner small type="grow"></b-spinner>
                                刷 新
                            </b-button> -->
                        </div>
                    </div>
                    <!-- <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid">
                            <div class="row">
                                <div class="col m--align-left">
                                    
                                </div>
                                <div class="col m--align-right">
                                    
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
                :data="dataList"
                :row-class-name="tableRowClassName">
                <!-- 复选框 -->
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column label="序号" min-width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="deploymentId" show-overflow-tooltip label="部署编号"></el-table-column>
                <el-table-column align="left" prop="deploymentName" show-overflow-tooltip label="名称"></el-table-column>
                <el-table-column align="left" prop="deploymentTime" show-overflow-tooltip label="部署时间"></el-table-column>
                <el-table-column align="left" prop="version" show-overflow-tooltip label="版本"></el-table-column>
                <el-table-column align="left" prop="tenantId" show-overflow-tooltip label="租户编号"></el-table-column>
                <el-table-column align="left" prop="status" show-overflow-tooltip label="状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">
                            <b-badge class="mr-1" variant="primary">发布中</b-badge>
                        </div>
                        <div v-else-if="scope.row.status == 1">
                            <b-badge class="mr-1" variant="danger">暂停</b-badge>
                        </div>
                        <div v-else>
                            <b-badge class="mr-1" variant="secondary">未知</b-badge>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="flag" min-width="150" show-overflow-tooltip label="标识">
                    <template slot-scope="scope">
                        <div v-if="scope.row.flag == 0">
                            <b-badge class="mr-1" variant="primary">通过平台设计器设计</b-badge>
                        </div>
                        <div v-else-if="scope.row.flag == 1">
                            <b-badge class="mr-1" variant="danger">通过上传部署</b-badge>
                        </div>
                        <div v-else>
                            <b-badge class="mr-1" variant="secondary">未知</b-badge>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="createBy" label="创建人" min-width="150"></el-table-column>
                <el-table-column align="center" prop="createTime" label="创建时间" min-width="180"></el-table-column>
                <el-table-column align="center" label="操作" fixed="left" min-width="200">
                    <template slot-scope="scope">
                        <!--scope.row当前行的对象-->
                        <a href="javascript:;" @click="getLcDeploymentHisDetail(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="详情">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                    width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24" />
                                        <path
                                            d="M19.2078777,9.84836149 C20.3303823,11.0178941 21,12 21,12 C21,12 16.9090909,18 12,18 C11.6893441,18 11.3879033,17.9864845 11.0955026,17.9607365 L19.2078777,9.84836149 Z"
                                            fill="#000000" fill-rule="nonzero" />
                                        <path
                                            d="M14.5051465,6.49485351 L12,9 C10.3431458,9 9,10.3431458 9,12 L5.52661464,15.4733854 C3.75006453,13.8334911 3,
                                          12 3,12 C3,12 5.45454545,6 12,6 C12.8665422,6 13.7075911,6.18695134 14.5051465,6.49485351 Z"
                                            fill="#000000" fill-rule="nonzero" />
                                        <rect fill="#000000" opacity="0.3"
                                            transform="translate(12.524621, 12.424621) rotate(-45.000000) translate(-12.524621, -12.424621) "
                                            x="3.02462111" y="11.4246212" width="19" height="2" />
                                    </g>
                                </svg>
                            </span>
                        </a>
                        <a href="javascript:;" @click="showDeploymentHisImage(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="部署历史版本流程图">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <polygon points="0 0 24 0 24 24 0 24"/>
                                        <path d="M6,5 L18,5 C19.6568542,5 21,6.34314575 21,8 L21,17 C21,18.6568542 19.6568542,20 18,
                                        20 L6,20 C4.34314575,20 3,18.6568542 3,17 L3,8 C3,6.34314575 4.34314575,5 6,5 Z M5,17 L14,
                                        17 L9.5,11 L5,17 Z M16,14 C17.6568542,14 19,12.6568542 19,11 C19,9.34314575 17.6568542,8 16,
                                        8 C14.3431458,8 13,9.34314575 13,11 C13,12.6568542 14.3431458,14 16,14 Z" fill="#000000"/>
                                    </g>
                                </svg>                                
                            </span>
                        </a>

                        <a href="javascript:;" @click="startProcessInstance(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="发起实例（原生态引擎）"  v-if="scope.$index + 1 == 1">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <polygon points="0 0 24 0 24 24 0 24"/>
                                        <path d="M21,12 C21,12.5522847 20.5522847,13 20,13 L19,13 C18.4477153,13 18,12.5522847 18,
                                        12 C18,11.4477153 18.4477153,11 19,11 L20,11 C20.5522847,11 21,11.4477153 21,12 Z M16,12 C16,
                                        12.5522847 15.5522847,13 15,13 L14,13 C13.4477153,13 13,12.5522847 13,12 C13,11.4477153 13.4477153,11 14,11 L15,11 C15.5522847,11 16,
                                        11.4477153 16,12 Z M11,12 C11,12.5522847 10.5522847,13 10,13 L9,13 C8.44771525,13 8,12.5522847 8,12 C8,11.4477153 8.44771525,11 9,
                                        11 L10,11 C10.5522847,11 11,11.4477153 11,12 Z M6,12 C6,12.5522847 5.55228475,13 5,13 L4,13 C3.44771525,13 3,12.5522847 3,12 C3,
                                        11.4477153 3.44771525,11 4,11 L5,11 C5.55228475,11 6,11.4477153 6,12 Z" fill="#000000"/>
                                        <path d="M14.9596876,21 L9.04031242,21 C8.76417005,21 8.54031242,20.7761424 8.54031242,
                                        20.5 C8.54031242,20.3864643 8.5789528,20.276309 8.64987802,20.1876525 L11.6095656,16.488043 C11.7820704,16.272412 12.0967166,
                                        16.2374514 12.3123475,16.4099561 C12.3411799,16.433022 12.3673685,16.4592107 12.3904344,
                                        16.488043 L15.350122,20.1876525 C15.5226268,20.4032834 15.4876661,20.7179296 15.2720351,
                                        20.8904344 C15.1833786,20.9613596 15.0732233,21 14.9596876,21 Z M9.04031242,3 L14.9596876,
                                        3 C15.23583,3 15.4596876,3.22385763 15.4596876,3.5 C15.4596876,3.61353575 15.4210472,
                                        3.723691 15.350122,3.81234752 L12.3904344,7.51195699 C12.2179296,7.72758796 11.9032834,
                                        7.76254865 11.6876525,7.59004388 C11.6588201,7.56697799 11.6326315,7.54078935 11.6095656,
                                        7.51195699 L8.64987802,3.81234752 C8.47737324,3.59671656 8.51233393,3.28207037 8.7279649,
                                        3.1095656 C8.81662142,3.03864038 8.92677668,3 9.04031242,3 Z" fill="#000000" opacity="0.3"/>
                                    </g>
                                </svg>                      
                            </span>
                        </a>

                        <!-- <a href="javascript:;" @click="startProcessInstance(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="发起实例（流程自带）"  v-if="scope.$index + 1 == 1">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <path d="M19,11 L21,11 C21.5522847,11 22,11.4477153 22,12 C22,12.5522847 21.5522847,13 21,
                                        13 L19,13 C18.4477153,13 18,12.5522847 18,12 C18,11.4477153 18.4477153,11 19,11 Z M3,11 L5,
                                        11 C5.55228475,11 6,11.4477153 6,12 C6,12.5522847 5.55228475,13 5,13 L3,13 C2.44771525,13 2,
                                        12.5522847 2,12 C2,11.4477153 2.44771525,11 3,11 Z M12,2 C12.5522847,2 13,2.44771525 13,3 L13,
                                        5 C13,5.55228475 12.5522847,6 12,6 C11.4477153,6 11,5.55228475 11,5 L11,3 C11,
                                        2.44771525 11.4477153,2 12,2 Z M12,18 C12.5522847,18 13,18.4477153 13,19 L13,21 C13,
                                        21.5522847 12.5522847,22 12,22 C11.4477153,22 11,21.5522847 11,21 L11,19 C11,
                                        18.4477153 11.4477153,18 12,18 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"/>
                                        <circle fill="#000000" cx="12" cy="12" r="3"/>
                                    </g>
                                </svg>
                            </span>
                        </a> -->

                        <a href="javascript:;" @click="getModuleKey(scope.row)" class="btn btn-sm btn-clean btn-icon"
                            title="发起实例（根据自定义配置）"  v-if="scope.$index + 1 == 1">
                            <span class="svg-icon svg-icon-primary svg-icon-2x">
                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <rect x="0" y="0" width="24" height="24"/>
                                        <rect fill="#000000" x="4" y="16" width="4" height="4" rx="1"/>
                                        <rect fill="#000000" x="4" y="10" width="4" height="4" rx="1"/>
                                        <rect fill="#000000" x="10" y="16" width="4" height="4" rx="1"/>
                                        <rect fill="#000000" opacity="0.3" x="10" y="10" width="4" height="4" rx="1"/>
                                        <rect fill="#000000" x="4" y="4" width="4" height="4" rx="1"/>
                                        <rect fill="#000000" x="16" y="16" width="4" height="4" rx="1"/>
                                    </g>
                                </svg>
                            </span>
                        </a>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>
        </div>
        <LcDeploymentHisDetail ref="LcDeploymentHisDetailRef"></LcDeploymentHisDetail>
        <StartBKWin ref="StartBKWinRef" @change="search"></StartBKWin><!--采用父窗口关闭传递的方法-->
        <LcStartWin ref="LcStartWinRef" @change="search"></LcStartWin><!--采用父窗口关闭传递的方法-->
        <LcDeploymentHIsImageWin ref="LcDeploymentHIsImageWinRef" @change="search"></LcDeploymentHIsImageWin><!--采用父窗口关闭传递的方法-->
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import LcDeploymentHisDetail from "@/view/bpm/lc-deployment-his/lc-deployment-his-detail.vue";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import LcDeploymentHIsImageWin from "@/view/bpm/lc-deployment-his/lc-image-win.vue";
import StartBKWin from "@/view/bpm/lc-deployment-his/start-bk-win.vue";
import LcStartWin from "@/view/bpm/lc-deployment-his/lc-start-win.vue";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: { lcProcessId:"",status:"",title:"",deploymentName: "",flag:"",moduleKey:"", lcProductId:"",lcGroupId:"", deploymentId:"",tenantId:"",},
            dataList: [],
            productList:[],
            groupList:[],
            sels: [], //当前选框选中的值
            pageNo: 1,      // 默认当前是第一页
            pageSize: 5,    // 当前每页的数据是5条
            totalCount: 0   // 总数默认为0
        }
    },
    watch: {        
        "searchForm.lcProductId":{//监听字段变化
            handler:function(newVal,old){
                this.searchForm.lcGroupId = "";
                if(newVal == "" || newVal == undefined || newVal == null){
                    this.groupList=[];
                }else{
                    this.initGroupList(newVal)
                }
            }
        },
    },
    props: {
        lcProcessObj:null,
    },
    components: {
        LcDeploymentHisDetail,
        LcDeploymentHIsImageWin,
        StartBKWin,
        LcStartWin,
    },
    mounted() {
        this.initList();   // 按当前的页号和每页的数据量进行查询
        this.initProductList();
    },
    methods: {
        initList() {
            showWating({ renderBody: "lcDeploymentHisTableBody" });
            var params = {};
            this.searchForm.lcProcessId = this.lcProcessObj.id;
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_BPM_API + "/lcDeploymentHis/list", params).then(({ data }) => {
                this.dataList = data.data;//给结果集赋值
                this.totalCount = data.total;// 获取当前数据的总数    
            });
        },
        tableRowClassName({row,rowIndex}) {
            if (rowIndex === 0) {
                return 'warning-row';
            }

        },
        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
            console.log("选中的值", sels.map((item) => item.deploymentId));
        },        
        delXtLcDeploymentHis(flag) { // 暂停或发布
            let confirmMessage = "确定要发布所选择的数据？";
            if(flag ==  0){
                if (this.sels.length === 0) {
                    handleAlert("请选择要发布的数据", "warning", 3)
                    return;
                }
            }else{
                if (this.sels.length === 0) {
                    handleAlert("请选择暂停的数据", "warning", 3)
                    return;
                }
                confirmMessage = "确定要暂停所选择的数据"
            }
           
            // 操作前提示
            this.$bvModal.msgBoxConfirm(confirmMessage, {
                title: '提示',
                size: 'sm',
                buttonSize: 'sm',
                okVariant: 'success',
                okTitle: '确定',
                cancelTitle: '取消',
                headerClass: 'p-2 border-bottom-0',
                footerClass: 'p-2 border-top-0',
                hideHeaderClose: false,
                centered: true
            }).then(value => {
                if(value){
                    let ids = this.sels.map((item) => item.id);
                    // 根据后台想要的参数格式选择
                    // console.log(ids.join(",")); //1,2,3,4
                    // console.log(ids); //[1,2,3,4]
                    let params = {id:ids.join(","),flag:flag};
                    apiUtil.delete(process.env.VUE_APP_BPM_API + "/lcDeploymentHis/delete",params).then(data => {
                        if (data.data.success) {
                            handleAlert("操作成功", "success", 3);
                            this.search();
                        } else {
                            handleAlert("操作失败", "error", 3);
                        }
                    });
                }                
            }).catch(err => {               
            })       
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        getLcDeploymentHisDetail(row) {
            this.$refs.LcDeploymentHisDetailRef.showModal(row.id);
        },
        showDeploymentHisImage(row){//监控
            this.$refs.LcDeploymentHIsImageWinRef.showModal(row);
        },
        getModuleKey(row){//根据自定义配置发起实例
            this.$refs.LcStartWinRef.showModal(row);
        },
        startProcessInstance(row) {//发起业务实例（流程自带）
            this.$refs.StartBKWinRef.showModal(row);
        },
        initProductList(){
            let params = {};
            apiUtil.post(process.env.VUE_APP_BPM_API + "/lcProduct/find", params).then(({ data }) => {
                this.productList = data.data;
            });
        },
        initGroupList(id){
            let params = {};
            apiUtil.query(process.env.VUE_APP_BPM_API + "/lcGroup/find/"+id, params).then(({ data }) => {
                this.groupList = data.data;
            });
        },
    }
};
</script>
<style>
.el-table .warning-row {
    background: pink!important;
}
</style>